<%@ page language="java" import="dbtaobao.connDb,java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
ArrayList<String[]> list = connDb.index_4();
%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts 可视化分析淘宝双11</title>
<link href="./css/style.css" type='text/css' rel="stylesheet"/>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
</head>
<body>
    <div class='header'>
        <p>ECharts 可视化分析淘宝双11</p>
    </div>
    <div class="content">
        <div class="nav">
            <ul>
                <li><a href="./index.jsp">所有买家各消费行为对比</a></li>
                <li><a href="./index1.jsp">男女买家交易对比</a></li>
                <li><a href="./index2.jsp">男女买家各个年龄段交易对比</a></li>
                <li><a href="./index3.jsp">商品类别交易额对比</a></li>
                <li><a href="./index4.jsp">各省份的总成交量对比</a></li>
                <li><a href="./index5.jsp">男女购物人数实时统计</a></li>
                <li class="current"><a href="#">用户复购概率</a></li>
            </ul>
        </div>
        <div class="container">
            <div class="title">用户复购概率</div>
            <div class="show">
                <div class='chart-type'>图</div>
                <div id="main"></div>
            </div>
        </div>
    </div>
    <script>
        //基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        // 定义配置项
        var option = {
            title: {
                text: '用户复购概率'
            },
            tooltip: {},
            xAxis: {},
            yAxis: {},
            series: [{
                type: 'scatter',
                data: []
            }]
        };
        
        // 读取 CSV 文件
        var data = [];
        $.get('data.csv', function(csv) {
            // 解析 CSV 数据
            csv = csv.split('\n');
            for (var i = 0; i < csv.length; i++) {
                var line = csv[i].trim();
                if (line) {
                    line = line.split(',');
                    data.push([line[0], line[1], line[2]]);
                }
            }
            option.series[0].data = data;
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
    </script>
</body>
</html>